<template>
  <div class="container">
    <Category title="游戏">
      <!--使用作用域插槽必须用template包裹，
        scope/slot-scope属性=后的表达式是插槽内部传递的数据的封装，格式 {games:xxx, ...}-->
      <template scope="atguigu">
        <ol>
          <li v-for="(item,index) in atguigu.games" :key="index">{{item}}</li>
        </ol>
      </template>
    </Category>
    
    <Category title="游戏">
      <template scope="atguigu">
        <ul>
          <li v-for="(item,index) in atguigu.games" :key="index">{{item}}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="atguigu">
        <h4 v-for="(item,index) in atguigu.games" :key="index">{{item}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  name: "App",
  components: {
    Category,
  },
  data() {
    return {
      
    }
  },
  methods: {

  }
}
</script>

<style scoped>
  .container, .foot {
    display: flex; /* 弹性盒模型布局 */
    justify-content: space-around; /* 主轴对齐 */
  }
</style>
